<template>
  <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
    <lay-card>
      <lay-row>
        <lay-col :md="24">
        <lay-col :md="6">
          <lay-button type="primary" size="sm" @click="add()" v-permission="PerKey.Notice_AddOrEdit"
                prefix-icon="layui-icon-release">发送消息
              </lay-button>
        </lay-col>
        <lay-col :md="18">
            <lay-form :model="queryModel" ref="layFormRef">
              <lay-row>
                <lay-col :md="4">
                  <lay-input size="sm" v-model="queryModel.title" style="width: 90%" placeholder="根据标题查询"></lay-input>
                </lay-col>
                <lay-col :md="4">
                  <lay-select size="sm" v-model="queryModel.status" placeholder="读取状态"  style="width: 90%">
                    <lay-select-option  :value="-1" label="读取状态"></lay-select-option>
                    <lay-select-option value="1" label="已读"></lay-select-option>
                    <lay-select-option value="0" label="未读"></lay-select-option>
                  </lay-select>
                </lay-col>
                <lay-col :md="4">
                  <lay-form-item label-width="0">
                    <lay-button size="sm" type="primary" @click="GetList(queryModel)"
                      prefix-icon="layui-icon-search">查询</lay-button>
                    <lay-button size="sm" @click="reset">重置</lay-button>
                  </lay-form-item>
                </lay-col>
              </lay-row>
            </lay-form>
          </lay-col>
        </lay-col>
        <lay-col :md="24">
          <lay-table :page="page" :columns="columns" :dataSource="dataSource"
            v-model:selectedKeys="selectedKeys" @change="change" :size="tablesize">
            <template v-slot:type="{ data }">
              {{ data.type == 1 ? "用户消息" : "系统消息" }}
            </template>
            <template v-slot:title="{ data }">
              <a href="javascript:;" @click="read(data.id)">
                <lay-badge v-if="data.status === 0" theme="blue">未读</lay-badge>
                {{ data.title }}
              </a>
            </template>
            <template v-slot:userinfo="{ data }">
              <div class="nickname"> <lay-avatar :src="avatar(data.postAvatar)"
                  radius></lay-avatar>{{ data.postNickname }}</div>
            </template>
            <template v-slot:readTime="{ data }">
              {{ data.status === 0 ? '未读' : data.readTime }}
            </template>
            <template v-slot:operator="{ data }">
              <lay-button-group>
                <lay-button type="primary" size="sm" @click="read(data.id)" v-permission="PerKey.Notice_Index"
                  prefix-icon="layui-icon-read">阅读
                </lay-button>
                <lay-button type="normal" size="sm" @click="answer(data.postUid)" v-permission="PerKey.Notice_AddOrEdit"
                  v-if="data.type === 1" prefix-icon="layui-icon-reply-fill">回复
                </lay-button>
                <lay-button type="danger" size="sm" @click="del(data)" v-permission="PerKey.Notice_Delete"
                  prefix-icon="layui-icon-delete">删除
                </lay-button>
              </lay-button-group>
            </template>
          </lay-table>
        </lay-col>
      </lay-row>
    </lay-card>


    <lay-layer title="回复消息" v-model="modelVisible" :resize="true" :area="['1200px', '800px']" :shadeClose="false">
      <NoticeAnswer :answerUid="answerUid" v-model="modelVisible"></NoticeAnswer>
    </lay-layer>

    <lay-layer title="阅读消息" v-model="noticeRead" :resize="true" :shadeClose="false" :closeBtn="false"
      :area="['1200px', '800px']">
      <NoticeRead :noticeId="noticeId" v-model="noticeRead"></NoticeRead>
    </lay-layer>

  </lay-container>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue";
import { layer } from "@layui/layer-vue";
import { getNoticeList, delOne } from "../../../api/module/notice";
import { PerKey } from "../../../library/permissionConst"
import { useRouter } from "vue-router";
import { systemConfig } from "../../../library/config"
import NoticeRead from './components/Read.vue'
import NoticeAnswer from './components/Answer.vue'
const selectedKeys = ref(["1"]);
const page = ref({ total: 0, limit: 15, current: 1, showCount: true, showRefresh: true, limits: [10, 15, 20, 50, 100, 200] });
const tablesize = ref('sm');
const router = useRouter();
const columns = [
  { title: "Id", width: "50px", key: "id", align: "center", },
  { title: "类型", width: "120px", customSlot: "type", align: "center", },
  { title: "消息标题", customSlot: "title" },
  { title: "发送人", width: "180px", align: "center", customSlot: "userinfo", },
  { title: "收取时间", key: "postTime", width: "160px", align: "center", },
  { title: "读取时间", customSlot: "readTime", width: "160px", align: "center", },
  { title: "操作", width: "240px", customSlot: "operator", key: "operator", align: "center", }
]
const dataSource = ref([])

//定义模型
const putData = reactive({
  queryModel: {
    pageNum: page.value.current,
    pageSize: page.value.limit,
    title: null,
    status: -1,
    listType: 1 //1为收到消息列表,空或2是已发消息列表
  }
})

const avatar = (src: string) => {
  return src != null ? systemConfig.hostURL + src : null
}
const { queryModel } = toRefs(putData)

const cateList = ref({ targetList: [] as any, })

//获取列表
const GetList = function (query: any) {
  if (query != null) {
    queryModel.value.title = query.title
    queryModel.value.status = query.status
  }

  getNoticeList(queryModel.value).then((res) => {
    if (res.status == 1) {
      //console.log(res)
      dataSource.value = res.data.data
      cateList.value = res.data.catelist
      page.value.total = res.data.count
    }
  })
}
const layFormRef = ref();
const reset = function () {
  layFormRef.value.reset();
}

const change = function ({ current, limit }: any) {
  queryModel.value.pageNum = current
  queryModel.value.pageSize = limit
  GetList(queryModel.value);
};

//阅读
const read = function (id: number) {
  changeVisibleRead(id)
}
//添加
const add = function () {
  router.push({ path: '/notice/addoredit' })
}
//删除
const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + " " + data.title + " 消息吗？", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList(queryModel.value)
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}
//获取消息列表
GetList(queryModel.value);


//模态操作
let answerUid = ref()  //要回复的用户ID
let modelVisible = ref(false)
//回复
const answer = function (postUid: number) {
  modelVisible.value = !modelVisible.value
  answerUid.value = postUid
}

//模态操作 阅读消息
let noticeId = ref()  //要进行操作的消息ID
const noticeRead = ref(false)

watch(noticeRead, (newValue, oldValue) => {
  if (newValue === false) {
    GetList(queryModel.value);
    // console.log('watch 已触发', newValue,oldValue)
  }
})

const changeVisibleRead = function (id: number) {
  noticeRead.value = !noticeRead.value
  noticeId.value = id
  GetList(queryModel.value);
}

</script>
<style scoped>
.nickname {
  height: 35px;
  line-height: 35px;
  margin: auto;
}
</style>